<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>
    <link rel="stylesheet" href="index.css">
    <title>政策兑现</title>
</head>
<body>
    <div id="app">
        <van-form @submit="onSubmit">
            <van-field
            v-model="formData.code"
            name="申请事项编号"
            label="申请事项编号"
            placeholder="请输入"
            label-align="right"
            ></van-field>
            <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="formData.startTime"
            label="申请开始时间"
            label-align="right"
            placeholder="点击选择时间"
            @click="showStartTime = true"
            ></van-field>
            <van-field
            v-model="formData.name"
            name="事项名称"
            label="事项名称"
            placeholder="请输入"
            label-align="right"
            ></van-field>
            <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="formData.endTime"
            label="结束时间"
            label-align="right"
            placeholder="点击选择时间"
            @click="showEndTime = true"
            ></van-field>
            <!--选择-->
            <div class="radioBox">
                <div class="radio-all" @click="handleActive(0)" :class="currentActive==0?'active':''">全部</div>
                <div class="radio-item-box">
                    <div @click="handleActive(1)" class="other" :class="currentActive==1?'active':''">在办</div>
                    <div @click="handleActive(2)" class="other" :class="currentActive==2?'active':''">已办结</div>
                    <div @click="handleActive(3)"@click="handleActive(1)" :class="currentActive==3?'active':''">不予兑现</div>
                    <div @click="handleActive(4)"@click="handleActive(1)" :class="currentActive==4?'active':''">中止申请</div>
                </div>
            </div>
            <!--查询-->
            <div class="filter" @click="handleFilter">查询</div>
        </van-form>
        <!--上拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                >
                  <van-cell v-for="(item,index) in list" :key="index" />
                    <div class="listItem">
                        <div class="circle">{{index+1|filterNum}}</div>
                        <div class="listItem-main">
                            <p>投资促进局一事一议或一企一策的扶持奖金</p>
                            <div>
                                <span>TC20180904-010</span>
                                <span>2018-08-04 15:56:09</span>
                            </div>
                        </div>
                        <div class="listItem-submit">
                            <div>1:00<span>元</span></div>
                            <div>预审不通过</div>
                        </div>
                    </div>
                  </van-cell>
                </van-list>
        </van-pull-refresh>


        <!--开始时间选择器-->
        <van-popup v-model="showStartTime" position="bottom">
                <van-datetime-picker
                type="date"
                title="选择年月日"
                @confirm="onStartTime"
                @cancel="showStartTime = false"
              />
        </van-popup>
        <!--结束时间选择器-->
        <van-popup v-model="showEndTime" position="bottom">
                <van-datetime-picker
                type="date"
                title="选择年月日"
                @confirm="onEndTime"
                @cancel="showEndTime = false"
              />
        </van-popup>
    </div>
    
   
</body>
 <!-- 引入 Vue 和 Vant 的 JS 文件 -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>

 <script>
     new Vue({
         el:"#app",
         data:{
            formData:{
                code:'',
                startTime:'',
                name:'',
                endTime:'',
            },
            showStartTime: false,
            showEndTime:false,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            currentActive:1,
         },
         filters:{
            filterNum(num){
                if(num<10){
                    return "0"+ num
                }else{
                    return num
                }
            }
         },
         methods:{
            handleFilter(){
                this.refreshing = true;
                this.loading = true;
                let data = this.formData;
                setTimeout(() => {
                    this.list = [];
                    for (let i = 0; i < 3; i++) {
                    this.list.push(this.list.length + 1);
                    }
                    this.refreshing = false;
                    this.loading = false;
     
                }, 1000);
            },
            onStartTime(time) {
                let newTime = time.getFullYear();
                let month = time.getMonth()+1;
                month = month < 10 ? '0' + month : month;  
                let day = time.getDate();
                day = day < 10 ? '0' + day : day; 
                let str = newTime+"-"+month+"-"+day;
                this.formData.startTime = str;
                this.showStartTime = false;
            },
            onEndTime(time) {
                let newTime = time.getFullYear();
                let month = time.getMonth()+1;
                month = month < 10 ? '0' + month : month;  
                let day = time.getDate();
                day = day < 10 ? '0' + day : day; 
                let str = newTime+"-"+month+"-"+day;
                this.formData.endTime = str;
                this.showEndTime = false;
            },
            onSubmit(){

            },
            handleActive(cur){
                this.currentActive = cur
            },
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                    }
                    if(!this.fliter){
                        for (let i = 0; i < 10; i++) {
                            this.list.push(this.list.length + 1);
                        }
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                    this.finished = true;
                    }
                }, 1000);
                },
                onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
                },
         }
        
     })
 </script>
</html>

<style>


</style>